The Document Object Model and JavaScript > Custom JavaScript controls > Tree controls

 

Tree controls

The tree control displays data in a hierarchical format and allows users to expand and collapse views of the data. The data is stored in the tree in a collection of "data nodes." Data nodes may contain other data nodes, referred to as "child nodes." Nodes at the extreme reaches of the tree are referred to as "leaf nodes." Leaf nodes, by definition, contain no child nodes of their own. The first node in the tree is referred to as the "root" node.

In Dreamweaver, the Keyboard Shortcuts editor uses the tree control:

Clicking on a node once selects it. In Windows, the node buttons are +/- buttons. On the Macintosh, the nodes are turn-down triangles. Nodes that contain child nodes are expandable and collapsible by clicking on the associated button next to the node.


 
Instantiating a tree control

A tree control uses three new tags (Dreamweaver uses the MM: prefix to distinguish the tag from standard HTML):

MM:TREECONTROL indicates to Dreamweaver that the form element is a tree control.
MM:TREECOLUMN specifies a column in the tree control.
MM:TREENODE specifies one node in the tree control.

MM:TREECONTROL The MM:TREECONTROL tag is a new HTML element that the user can specify in an extension document to instantiate a tree control. The tag has several attributes, properties, events, and methods.

Although the MM:TREECONTROL tag is non-empty, it may not contain raw text. The only valid content for an MM:TREECONTROL tag is at least one or more MM:TREECOLUMN tags and zero or more MM:TREENODE tags.

The HTML attributes for an MM:TREECONTROL tag are:
Attribute Name Description Sample

name

Name of the tree control.

<MM:TREECONTROL name="MyTree">

</MM:TREECONTROL>

size

Number of rows to size the control for. (optional) Default is 5 rows.

<MM:TREECONTROL size="6">

</MM:TREECONTROL>

multiple

Allows a tree to have multiple selections. Default is single-selection. (optional)

<MM:TREECONTROL MULTIPLE>

</MM:TREECONTROL>

style

Style definition for height and width of tree control. If specified, takes precedence over SIZE attribute. (optional)

<MM:TREECONTROL style="width:100px;height:200px">

</MM:TREECONTROL>

noheaders

Indicates that the tree column headers won't be displayed if this attribute is present.

<MM:TREECONTROL noheaders">

</MM:TREECONTROL>


MM:TREECOLUMN The MM:TREECOLUMN tag specifies a column in the tree control. You must sepcify at least one MM:TREECOLUMN tag.

The syntax for an MM:TREECOLUMN tag is:
Attribute Name Description Sample

name

Name of the column.

<MM:TREECOLUMN name="Column1">

value

String to appear in column header.

<MM:TREECOLUMN value="Files">

width

Width of the column, in pixels. Percentage not supported. Default is 100.

<MM:TREECOLUMN width="60">

align

Alignment of column text - 'left', 'right', or 'center'. Default is left.

<MM:TREECOLUMN align="center">

state

State of the column- "visible" or "hidden".

<MM:TREECOLUMN state="visible">


TREECOLUMN tags should appear at the top of the TreeControl declaration, such as:

<MM:TREECONTROL name="tree1">
<MM:TREECOLUMN name="Column1" width="100" state="visible">
<MM:TREECOLUMN name="Column2" width="80" state="visible">
... 
</MM:TREECONTROL> 

Note: TREECOLUMN tags can technically appear anywhere in the TREECONTROL tag, but should be placed at the top for readability.

MM:TREENODE The MM:TREENODE tag specifies an individual node within an MM:TREECONTROL. It is a non-empty tag and may contain only other MM:TREENODE tags.

The MM:TREENODE tag may not contain raw text, even though it is non-empty. The only valid content for an MM:TREENODE tag is zero or more MM:TREENODE tags.

The MM:TREENODE attributes are:
Attribute Name Description Sample

name

Name of the TREENODE tag.

<MM:TREENODE name="node1">

</MM:TREENODE>

value

Contains the content for the given node. For more than one column, this will be a pipe-delimited string. To specify an empty column, place a single space character before the pipe.

<MM:TREENODE value="Lawnmower|129.95">

</MM:TREENODE>

// EMPTY COL EXAMPLE:

<MM:TREENODE value="Data| |">

</MM:TREENODE>

state

State of the node - "expanded" or "collapsed" .

<MM:TREENODE state="expanded">

</MM:TREENODE>

selected

True if the node is currently selected. You can select multiple nodes by setting this attribute on more than one tree node, if the tree has a MULTIPLE attribute.

<MM:TREENODE selected>

</MM:TREENODE>

icon

Integer index of built-in icon to use, starting with 0. The built-in icons are

0 = no icon

1 = DW document icon

2 = multi-document icon

3 = folder

4 = image document

5 = green check

6 = red X

7 = question mark

8 = note icon

9 = warning icon

10 = stop icon

<MM:TREENODE icon='1'>

</MM:TREENODE>


A typical set of tree control code might look like:

<MM:TREECONTROL name="CtrlName" [size=N] [style="[width:#px];[height:#px]"]>
<MM:TREECOLUMN name="Column1" value="Items"> 
<MM:TREENODE value="Item1" selected></MM:TREENODE>
<MM:TREENODE value="Item2|Item3" expanded>
<MM:TREENODE value="Item4|Item5"></MM:TREENODE>
</MM:TREENODE> 
</MM:TREECONTROL>